<template>
    <div class="bodyDiv">
      <Header :position="position"></Header>
      <div class="left">
        <el-card style="width: 100%;height: 220px">
          <div slot="header" style="font-size: 20px;font-weight: bolder;text-align: left">
            <span>数据统计</span>
          </div>
          <div style="display: flex; width: 100%;justify-content: space-around;margin-top: 10px;text-align: left">
            <div style=" ">
              <h3 style="margin: 0px">总数</h3>
              <h1 style="color: #000000;font-size: 70px;margin: 0px">{{current}}</h1>
            </div>
            <div style="">
              <h3 style="margin: 0px">在线</h3>
              <h1 style="color: #91cc75;font-size: 70px;margin: 0px">{{online}}</h1>
            </div>
            <div style="">
              <h3 style="margin: 0px">离线</h3>
              <h1 style="color: #5470c6;font-size: 70px;margin: 0px">{{offline}}</h1>
            </div>
          </div>
        </el-card>
        <el-card style="margin-top: 10px;text-align: left">
<!--          <div style="width: 100%;justify-content: center">
            <div>
              <p style="font-weight: bold;width: 100%;white-space: nowrap">在线离线统计:</p>
              <el-divider style="width: 100%"></el-divider>
            </div>
          </div>-->
          <span style="margin-left: 30px;font-weight: bolder">在线离线统计</span>
          <annual-pie :series="pieData" style="height: 250px;width:100%;margin-top: -30px;margin-bottom: -10px"></annual-pie>
        </el-card>
        <el-card style="margin-top: 10px;text-align: left">
          <span style="margin-left: 30px;font-weight: bolder">车种数量统计</span>
          <line-histogram style="width: 100%;height: 297px;" :series="lineHistogramTestData"></line-histogram>
        </el-card>
      </div>
      <div class="right">
        <el-card style="height: 873px;text-align: left">
          <div slot="header" style="font-size: 20px;font-weight: bolder;text-align: left">
            <span>车辆管理</span>
          </div>
          <div style="display: flex; justify-content: space-between; padding: 10px;">
            <div>
              <el-select placeholder="选择车种"></el-select>
              <el-select placeholder="选择车型" style="margin-left: 10px"></el-select>
            </div>
            <div>
              <el-button type="primary" icon="el-icon-arrow-right">检索</el-button>
              <el-button @click="trainVisible=true">添加车辆</el-button>
            </div>
          </div>
          <el-table :data="testData"
                    style="width: 100%;"
                    stripe
                    highlight-current-row
                    height="670px"
                    ref="tableList">
            <el-table-column label="车种" prop="class"></el-table-column>
            <el-table-column label="车型" prop="type"></el-table-column>
            <el-table-column label="车号" prop="id"></el-table-column>
            <el-table-column label="设备数量" prop="num"></el-table-column>
            <el-table-column label="操作">
              <template>
                <el-button type="primary" size="small" @click="deviceVisible=true">接入新设备信息</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination style="margin-top: 5px"></el-pagination>
        </el-card>
      </div>
      <el-dialog
        title="添加车辆信息"
        :modal-append-to-body="false"
        :visible.sync="trainVisible"
        width="30%"
        style="padding: 150px">
        <el-form label-position="left">
          <el-form-item label="车种" style="display: flex;justify-content: center">
            <el-input style=""></el-input>
          </el-form-item>
          <el-form-item label="车型" style="display: flex;justify-content: center">
            <el-input style=""></el-input>
          </el-form-item>
          <el-form-item label="车号" style="display: flex;justify-content: center">
            <el-input style=""></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button-group>
              <el-button @click="trainVisible = false">取 消</el-button>
              <el-button type="primary" @click="trainVisible = false">确 定</el-button>
            </el-button-group>
          </div>
      </el-dialog>
      <el-dialog
        title="添加设备信息"
        :modal-append-to-body="false"
        :visible.sync="deviceVisible"
        width="30%"
        style="padding: 150px">
        <el-form label-position="left">
          <el-form-item label="设备名称" style="display: flex;justify-content: center">
            <el-input style=""></el-input>
          </el-form-item>
          <el-form-item label="设备编号" style="display: flex;justify-content: center">
            <el-input style=""></el-input>
          </el-form-item>
          <el-form-item label="设备位置" style="display: flex;justify-content: center">
            <el-input style=""></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button-group>
            <el-button @click="deviceVisible = false">取 消</el-button>
            <el-button type="primary" @click="deviceVisible = false">确 定</el-button>
          </el-button-group>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import AnnualPie from "../../components/charts/AnnualPie";
  import LineHistogram from "../../components/charts/LineHistogram";
  import Header from "../../components/Header";
    export default {
      name: "Train",
      components:{Header, LineHistogram, AnnualPie,},
      data(){
        return{
          position:{
            secondTitle:'操作管理',
            thirdTitle:'车辆管理'
          },
          current:39,
          online:23,
          offline:16,
          lineHistogramTestData:[
            {
              name: '在线',
              type: 'bar',
              color: '#91cc75',
              data: [22, 75, 164, 225, 125, 176, 149, 101, 32, 45, 15, 72]
            },
            {
              name: '离线',
              type: 'bar',
              color: '#5470c6',
              data: [22, 5, 9, 26, 28, 70, 175, 182, 48, 18, 6, 2]
            },
          ],
          pieData:[
            {value: 1048, name: '离线'},
            {value: 735, name: '在线'},
          ],
          testData:[
            {
              class:'货车',
              type:'VS-23',
              id:'113565',
              num:'6'
            },
            {
              class:'货车',
              type:'BT-19',
              id:'156652',
              num:'12'
            },
            {
              class:'货车',
              type:'BD-35',
              id:'112568',
              num:'6'
            },
          ],
          /*添加车辆信息和添加设备信息对话框默认*/
          trainVisible:false,
          deviceVisible:false,
        }
      },
      methods:{

      }
    }
</script>

<style scoped>
  .bodyDiv{
    display: flex;
  }
  .left{
    width: 55%;
  }
  .right{
    width: 100%;
    margin-left: 10px;
  }
</style>
